<template>
    <div class="form-area">
		<!-- 主体部分 -->
		<template>
			<!-- 表格上方的按钮 -->
			<div class="table-header">
				<el-button type="primary" @click="showSupplierPage()" v-if="!isDetails">添加供应商</el-button>
			</div>

			<!-- 表格 -->
			<el-table :data="tableDataProductSupplier" stripe border style="width: 100%">
				<el-table-column type="index" fixed label="序号" width="50"></el-table-column>
				<el-table-column label="供应商名称" prop="supplierName"></el-table-column>
				<el-table-column label="供应商编号" prop="supplierCode" width="250"></el-table-column>
				<el-table-column label="联系人" prop="personInCharge" width="250"></el-table-column>
				<el-table-column label="联系电话" prop="phone" width="200"></el-table-column>
				<el-table-column label="状态" prop="status" width="200">
					<template slot-scope="scope">{{scope.row.status==0?"暂停合作":"正常合作"}}</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="120" v-if="!isDetails">
					<template slot-scope="scope">
					    <el-button size="small" @click.native.prevent="deleteRow(scope.$index, scope.row)">移除</el-button>
				    </template>
				</el-table-column>
			</el-table>

		    <!-- 页脚部分 -->
		    <div class="page table-page">
				<el-pagination
					background
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="total"
				></el-pagination>
			</div>

			<div class="form-submit">
				<el-button class="form-cancle-btn" :disabled="loading" @click="prev">上一步</el-button>
				<el-button class="form-submit-btn" :disabled="loading" type="primary" @click="onSubmit()" v-if="!isDetails">保存</el-button>
				<el-button class="form-cancle-btn" :disabled="loading" @click="closePage" v-if="isDetails">返回</el-button>
			</div>
		</template>

	 <!-- 弹框-添加供应商 -->
    <template>
      <el-dialog
        title="添加供应商"
        width="60%"
        :visible.sync="showSupplierList"
		:before-close="handleClose"
      >
        <div class="dialog-search">
          <el-form class="inline-form" :inline="true" :model="searchSupplierForm">
            <el-form-item label="供应商名称">
              <el-input
                v-model="searchSupplierForm.supplierName"
                placeholder="请输入关键字"
                style="width: 400px"
              ></el-input>
            </el-form-item>
            <el-button type="primary" size="medium" @click="fetchDataSupplier">搜索</el-button>
          </el-form>
        </div>

        <div class="form-table">
          <el-table :data="tableDataSupplier" stripe border style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column property="supplierName" label="供应商名称"></el-table-column>
            <el-table-column property="supplierCode" label="供应商编号" width="150"></el-table-column>
			<el-table-column label="联系人" prop="personInCharge" width="200"></el-table-column>
			<el-table-column label="联系电话" prop="phone" width="200"></el-table-column>
			<el-table-column label="状态" prop="status" width="150">
				<template slot-scope="scope">{{scope.row.status==0?"暂停合作":"正常合作"}}</template>
			</el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  plain
                  size="small"
                  disabled
                  v-if="scope.row.choice==1"
                  >已选</el-button
                >
                <el-button
                  type="primary"
                  plain
                  size="small"
                  v-if="scope.row.choice==0 && !scope.row.isSeleted"
                  @click="scope.row.isSeleted = true"
                  >选择</el-button
                >
                <el-button
                  type="primary"
                  size="small"
                  v-if="scope.row.choice==0 && scope.row.isSeleted"
                  @click="scope.row.isSeleted = false"
                  >已选</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="page dialog-page">
          <el-pagination
            background
            @current-change="handleCurrentChangeSupplier"
            :current-page="currentPageSupplier"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSizeSupplier"
            layout="total, prev, pager, next"
            :total="totalSupplier"
          ></el-pagination>
        </div>

        <div class="dialog-footer" slot="footer">
          <el-button type="primary" @click="saveRelation">保存</el-button>
          <el-button @click="closeShowSupplierList()">取消</el-button>
        </div>
      </el-dialog>
    </template>
    </div>
</template>

<script>
import { findAllSupplierProductListByPage,
     addBatchSupplierProductBySupplierIds,
		 deleteSupplierProduct,
		 findAllListByPage
} from '@api/supplier/supplier'
export default {
  props: {
	  isDetails: {
	  	type: Boolean,
	  	default: false
	  },
	  productDetails: Object
  },
  data () {
    return {
      loading: false,
      productId: 0, // 需要传递商品id过来
      tableDataProductSupplier: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,

      showSupplierList: false,
      searchSupplierForm: {
        supplierName: ''
      },
      tableDataSupplier: [],
      currentPageSupplier: 1,
      pageSizeSupplier: 10,
      totalSupplier: 0,
      supplierIds: ''
    }
  },
  mounted () {
    this.productId = sessionStorage.getItem('productId')
    this.fetchDataSupplierProduct()
  },
  methods: {
    fetchDataSupplierProduct () {
      this.loading = true
      findAllSupplierProductListByPage({
        productId: this.productId,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableDataProductSupplier = res.data.content
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    deleteRow (index, row) {
      this.$confirm('确认删除' + row.supplierName + '？').then(_ => {
        this.loading = true
        deleteSupplierProduct({
          supplierId: row.supplierId,
		  productId: this.productId
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.fetchDataSupplierProduct()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
    },
    handleSizeChange (val) {
	    this.pageSize = val
      this.fetchDataSupplierProduct()
    },
    handleCurrentChange (val) {
	    this.currentPage = val
      this.fetchDataSupplierProduct()
    },
    prev () { // 上一步
      this.$emit('step', 2)
    },
    closePage () {
      // 返回列表
      this.$emit('close')
    },
    onSubmit () {
	  this.$message.success('保存成功')
      this.$emit('close')
    },
    showSupplierPage () {
	  this.fetchDataSupplier()
      this.showSupplierList = true
    },
    fetchDataSupplier () {
      this.loading = true
      findAllListByPage({
        productId: this.productId,
        status: 1,
        supplierName: this.searchSupplierForm.supplierName,
        currentPage: this.currentPageSupplier,
        pageSize: this.pageSizeSupplier
      }).then(res => {
        for (let index in res.data.content) {
          res.data.content[index].isSeleted = false
        }
        this.tableDataSupplier = res.data.content
        this.totalSupplier = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    handleSizeChangeSupplier (val) {
	    this.pageSizeSupplier = val
      this.fetchDataSupplier()
    },
    handleCurrentChangeSupplier (val) {
	    this.currentPageSupplier = val
      this.fetchDataSupplier()
    },
    saveRelation () {
	  this.loading = true
      var idsStr = ''
      this.tableDataSupplier.forEach(row => {
        if (row.isSeleted == true) {
          idsStr += ',' + row.id
        }
      })
      idsStr = idsStr.slice(1)
      if (idsStr == '') {
        this.$message({ message: '请选择供应商', type: 'warning' })
        return
      }
      addBatchSupplierProductBySupplierIds({
        productId: this.productId,
        supplierIds: idsStr
      })
        .then((res) => {
          if (res.code == '000000') {
            this.$message({ message: res.message, type: 'success' })
            this.fetchDataSupplierProduct()
            this.closeShowSupplierList()
          } else {
            this.$message({ message: res.message, type: 'error' })
            this.closeShowSupplierList()
          }
			  this.loading = false
        })
        .catch((err) => {
          console.log('err', err)
			  this.loading = false
        })
    },
    closeShowSupplierList () {
      this.searchSupplierForm = {
        supplierName: ''
      }
      this.showSupplierList = false
    },
    handleClose (done) {
      this.searchSupplierForm = {
        supplierName: ''
      }
      done()
    }
  }
}
</script>
